<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>舆情情况</title>
    
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<!-- <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> -->
</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div class="wrapper wrapper-content">
	<div class="row">
	<div class="col-sm-12">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>媒体分析</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<style>
    .g2-guide-html {
        width: 100px;
        height: 80px;
        vertical-align: middle;
        text-align: center;
        line-height: 1;
    }

    .g2-guide-html .title {
        font-size: 12px;
        color: #8c8c8c;
        font-weight: 300;
    }

    .g2-guide-html .value {
        font-size: 32px;
        color: #000;
        font-weight: bold;
    }
</style>
<script>
var data = [{
  type: '论坛',
  percent: 0.045
}, {
  type: '微博',
  percent: 0.057
}, {
  type: '微信',
  percent: 0.579
}, {
  type: '新闻',
  percent: 0.319
}];
var sum = 35000;
var ds = new DataSet();
var dv = ds.createView().source(data);
dv.transform({
  type: 'map',
  callback: function callback(row) {
    row.value = parseInt(sum * row.percent);
    return row;
  }
});
var chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight-200,
  padding: 'auto'
});
chart.source(dv);
chart.tooltip(false);
chart.legend({
  position: 'right-center',
  offsetX: -100
});
chart.coord('theta', {
  radius: 0.75,
  innerRadius: 0.6
});
chart.intervalStack().position('percent').color('type', ['#0a7aca', '#0a9afe', '#4cb9ff', '#8ed1ff']).opacity(1).label('percent', {
  offset: -18,
  textStyle: {
    fill: 'white',
    fontSize: 12,
    shadowBlur: 2,
    shadowColor: 'rgba(0, 0, 0, .45)'
  },
  rotate: 0,
  autoRotate: false,
  formatter: function formatter(text, item) {
    return String(parseInt(item.point.percent * 100)) + '%';
  }
});
chart.guide().html({
  position: ['50%', '50%'],
  html: '<div class="g2-guide-html"><p class="title">媒体来源总计</p><p class="value">35000</p></div>'
});
chart.on('interval:mouseenter', function(ev) {
  var data = ev.data._origin;
  $(".g2-guide-html").css('opacity', 1);
  $(".g2-guide-html .title").text(data.type);
  $(".g2-guide-html .value").text(data.value);
});

chart.on('interval:mouseleave', function() {
  $(".g2-guide-html .title").text('媒体来源总计');
  $(".g2-guide-html .value").text(500);
});
chart.render();
</script>
             </div>
         </div>
     </div>
    </div>
    </div>

</body>
</html>
